<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运大转盘抽奖活动</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 1000px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .content {
            display: flex;
            padding: 30px;
        }
        
        .wheel-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        .wheel-wrapper {
            position: relative;
            width: 300px;
            height: 300px;
            margin-bottom: 30px;
        }
        
        .wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(
                #ff9966 0deg 36deg, 
                #ff5e62 36deg 72deg,
                #ff9966 72deg 108deg,
                #ff5e62 108deg 144deg,
                #ff9966 144deg 180deg,
                #ff5e62 180deg 216deg,
                #ff9966 216deg 252deg,
                #ff5e62 252deg 288deg,
                #ff9966 288deg 324deg,
                #ff5e62 324deg 360deg
            );
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            transition: transform 4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
            transform: rotate(0deg);
        }
        
        .wheel-pointer {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 50px;
            background-color: #ff4b2b;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            z-index: 10;
        }
        
        .spin-button {
            padding: 15px 40px;
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .spin-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .spin-button:active {
            transform: translateY(1px);
        }
        
        .spin-button:disabled {
            background: linear-gradient(to right, #bdc3c7, #2c3e50);
            cursor: not-allowed;
            transform: none;
        }
        
        .prizes-container {
            flex: 1;
            padding: 20px;
        }
        
        .prizes-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #ff4b2b;
            text-align: center;
        }
        
        .prizes-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .prize-item {
            background: linear-gradient(to right, #fdfcfb, #f5f7fa);
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .prize-item:hover {
            transform: translateY(-5px);
        }
        
        .prize-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            color: white;
            font-size: 1.5rem;
        }
        
        .prize-info h3 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .prize-info p {
            color: #666;
            font-size: 0.9rem;
        }
        
        .result-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            animation: popIn 0.5s ease;
        }
        
        @keyframes popIn {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .result-icon {
            font-size: 4rem;
            color: #ff4b2b;
            margin-bottom: 20px;
        }
        
        .result-title {
            font-size: 2rem;
            margin-bottom: 15px;
            color: #ff4b2b;
        }
        
        .result-text {
            font-size: 1.2rem;
            margin-bottom: 25px;
            color: #333;
        }
        
        .modal-button {
            padding: 12px 30px;
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .modal-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .chances-left {
            margin-top: 20px;
            font-size: 1.1rem;
            color: #666;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .wheel-wrapper {
                width: 250px;
                height: 250px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .prizes-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-gift"></i> 幸运大转盘</h1>
            <p class="subtitle">转动转盘，赢取惊喜好礼！100%中奖率！</p>
        </header>
        
        <div class="content">
            <div class="wheel-container">
                <div class="wheel-wrapper">
                    <div class="wheel-pointer"></div>
                    <div class="wheel" id="wheel"></div>
                </div>
                
                <button class="spin-button" id="spinButton">开始抽奖</button>
                
                <div class="chances-left">
                    <i class="fas fa-ticket-alt"></i> 今日还剩 <span id="chances">3</span> 次抽奖机会
                </div>
            </div>
            
            <div class="prizes-container">
                <h2 class="prizes-title">奖品展示</h2>
                
                <div class="prizes-grid">
                    <div class="prize-item">
                        <div class="prize-icon">
                            <i class="fas fa-gem"></i>
                        </div>
                        <div class="prize-info">
                            <h3>一等奖：iPhone 14 Pro</h3>
                            <p>最新款苹果手机，256GB存储</p>
                        </div>
                    </div>
                    
                    <div class="prize-item">
                        <div class="prize-icon">
                            <i class="fas fa-laptop"></i>
                        </div>
                        <div class="prize-info">
                            <h3>二等奖：MacBook Air</h3>
                            <p>轻薄便携，M2芯片</p>
                        </div>
                    </div>
                    
                    <div class="prize-item">
                        <div class="prize-icon">
                            <i class="fas fa-headphones"></i>
                        </div>
                        <div class="prize-info">
                            <h3>三等奖：AirPods Pro</h3>
                            <p>主动降噪，无线充电</p>
                        </div>
                    </div>
                    
                    <div class="prize-item">
                        <div class="prize-icon">
                            <i class="fas fa-gift"></i>
                        </div>
                        <div class="prize-info">
                            <h3>四等奖：优惠券</h3>
                            <p>满299减100元优惠券</p>
                        </div>
                    </div>
                    
                    <div class="prize-item">
                        <div class="prize-icon">
                            <i class="fas fa-coins"></i>
                        </div>
                        <div class="prize-info">
                            <h3>五等奖：积分奖励</h3>
                            <p>5000积分，可兑换礼品</p>
                        </div>
                    </div>
                    
                    <div class="prize-item">
                        <div class="prize-icon">
                            <i class="fas fa-smile"></i>
                        </div>
                        <div class="prize-info">
                            <h3>参与奖：谢谢参与</h3>
                            <p>感谢您的参与，下次好运</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="result-modal" id="resultModal">
        <div class="modal-content">
            <div class="result-icon">
                <i class="fas fa-trophy"></i>
            </div>
            <h2 class="result-title" id="resultTitle">恭喜中奖！</h2>
            <p class="result-text" id="resultText">您获得了：iPhone 14 Pro</p>
            <button class="modal-button" id="modalButton">确定</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const wheel = document.getElementById('wheel');
            const spinButton = document.getElementById('spinButton');
            const resultModal = document.getElementById('resultModal');
            const resultTitle = document.getElementById('resultTitle');
            const resultText = document.getElementById('resultText');
            const modalButton = document.getElementById('modalButton');
            const chancesElement = document.getElementById('chances');
            
            let chances = 3;
            let isSpinning = false;
            
            // 奖品列表
            const prizes = [
                { name: "iPhone 14 Pro", type: "一等奖" },
                { name: "MacBook Air", type: "二等奖" },
                { name: "AirPods Pro", type: "三等奖" },
                { name: "优惠券", type: "四等奖" },
                { name: "积分奖励", type: "五等奖" },
                { name: "谢谢参与", type: "参与奖" }
            ];
            
            // 旋转转盘
            function spinWheel() {
                if (isSpinning || chances <= 0) return;
                
                isSpinning = true;
                chances--;
                chancesElement.textContent = chances;
                
                if (chances <= 0) {
                    spinButton.disabled = true;
                }
                
                // 随机选择奖品（权重不同）
                const randomPrize = getRandomPrize();
                const prizeIndex = prizes.findIndex(p => p.name === randomPrize.name);
                
                // 计算旋转角度（5圈 + 奖品所在角度）
                const rotations = 5;
                const prizeAngle = 36 * prizeIndex; // 每个奖品36度
                const totalRotation = rotations * 360 + prizeAngle;
                
                // 设置旋转动画
                wheel.style.transition = 'transform 4s cubic-bezier(0.17, 0.67, 0.83, 0.67)';
                wheel.style.transform = `rotate(${totalRotation}deg)`;
                
                // 动画结束后显示结果
                setTimeout(() => {
                    showResult(randomPrize);
                    isSpinning = false;
                }, 4100);
            }
            
            // 带权重的随机奖品选择
            function getRandomPrize() {
                const random = Math.random();
                
                if (random < 0.05) { // 5%概率
                    return prizes[0]; // 一等奖
                } else if (random < 0.15) { // 10%概率
                    return prizes[1]; // 二等奖
                } else if (random < 0.3) { // 15%概率
                    return prizes[2]; // 三等奖
                } else if (random < 0.6) { // 30%概率
                    return prizes[3]; // 四等奖
                } else if (random < 0.8) { // 20%概率
                    return prizes[4]; // 五等奖
                } else { // 20%概率
                    return prizes[5]; // 参与奖
                }
            }
            
            // 显示中奖结果
            function showResult(prize) {
                resultTitle.textContent = prize.type === "谢谢参与" ? "谢谢参与" : "恭喜中奖！";
                resultText.textContent = `您获得了：${prize.name}`;
                resultModal.style.display = 'flex';
            }
            
            // 点击事件监听
            spinButton.addEventListener('click', spinWheel);
            
            modalButton.addEventListener('click', function() {
                resultModal.style.display = 'none';
            });
            
            // 初始化转盘分区文字（使用Canvas实现会更美观，这里简化处理）
        });
    </script>
</body>
</html>